{% extends "base/chart_base.html" %}

{% block page_content%}
{% for message in get_flashed_messages() %}
  <div class="alert alert-warning">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      {{ message }}
  </div>
{% endfor %}

<div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <div class="page-header">
            <h3>查找</h3>
        </div>
        <div class="bs-callout bs-callout-primary">
          <h4>存在节点</h4>
          <p>01, 02, 03, 04, 05</p>
        </div>
        <h4 class="form-signin-heading">搜索节点</h4>
        <label for="inputSearch" class="sr-only">Search</label>
        <input type="text" name="node" id="inputsearch" class="form-control" placeholder="Search" required autofocus><br>
        <button class="btn btn-sm btn-primary" id="click2search" value="Search">Search</button>
      <div class="page-header">
            <h3>MQTT订阅</h3>
      </div>
          <div class="bs-callout bs-callout-success" id="websocket-info">
            打开Websocket捕获
          </div>
          <button class="btn btn-sm btn-primary" id="start-tasksub" value="open">Start</button>
      </div>
      <div class="col-md-10">
        <div class="page-header">
            <h3>数据统计</h3>
            <span id="flash-text">hello word</span>
        </div>
			<div id="actualtime-temp"></div>
			<div id="lastday-temp"></div>
			<div id="lastweek-temp"></div>
			<div id="all-temp"></div>
      </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
	{{ super() }}
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
  <script type="text/javascript" charset="utf-8">
      var namespace = '/task'
      var socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
      socket.on('connect', function(){
        // console.log("Client has connected to the server");
        socket.emit('my event', 'connection signal from client');
      });
      socket.on('server_response', function(msg) {
          console.log("received: " + msg);
          // $("#websocket-info").append('<br><h4>Received # ' + msg + '</h4>');
          // $("info").html(msg)
      });
      // socket.on('test response', function(data){
      //   console.log("test # " + data);
      // });
      socket.on('update temperature', function(data){
        console.log("update temperature # " + data);
        $("#websocket-info").text(data);
      });
      // $('#start-tasksub').bind('click', function() {
      //   $.get('/tasksub');
      // });

  </script>
	<script type="text/javascript" src="../static/js/temperature/tempview.js"></script>
	<script type="text/javascript" src="../static/js/temperature/lastdaytemp.js"></script>
	<script type="text/javascript" src="../static/js/temperature/lastweektemp.js"></script>
	<script type="text/javascript" src="../static/js/temperature/ajax_temp.js"></script>
	<script type="text/javascript" src="../static/js/temperature/all_temp.js"></script>
{% endblock %}